﻿<!doctype html>
<html lang="en">
<html manifest="demo.appcache">
 <head>
  <meta charset="UTF-8">
  <!--meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"-->

    <script src="jquery.min.js"></script>
	 <link  href="argus.css" rel="stylesheet">
	<script src="argus.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>

 
  <title>Nokia DO for LTE</title>
  <style>

   html{
                margin: 0;
                width: 100%;
                height: 100%;   
				}
				

 .arguschart{
   height:300px;
  }  
 
 .wall-body{
   height:360px;
  }

			

</style>
 </head>
 <body class="gry">  
 <div class="slide gry-light w200">
   <ul>
     <li><a>高铁场景透视</a><span class="slide-pull-right"></span>
	     <ul class="slide-menu gry">
           <li><a><span class="glyphicon glyphicon-bullhorn text-blue-light"> </span>场景透视</a></li>
	       <li><a>场景透视</a>
		       <ul class="slide-menu gry">
           <li><a><span class="glyphicon glyphicon-bullhorn text-blue-light"> </span>场景透视</a></li>
	       <li><a>场景透视</a></li>
	       <li><a>场景透视</a></li>
	       <li><a>场景透视</a></li>
		   <li><a>场景透视</a></li>
        </ul></li>
	       <li><a>场景透视</a></li>
	       <li><a>场景透视</a></li>
		   <li><a>场景透视</a></li>
        </ul>
	 </li>
	  <li><a>s高铁场景透视</a></li>
	   <li><a>高铁场景透视</a></li>
	    <li><a>高铁场景透视</a></li>
		 <li><a>高铁场景透视</a></li>
	
     <li><a>高铁场景透视</a></li>
	  <li><a>高铁场景透视</a></li>
	   <li><a>高铁场景透视</a></li>
	    <li><a>高铁场景透视</a></li>
		 <li><a>高铁场景透视</a></li>
	
     <li><a>高铁场景透视</a></li>
	  <li><a>高铁场景透视</a></li>
	   <li><a>高铁场景透视</a></li>
	    <li><a>高铁场景透视</a></li>
		 <li><a>高铁场景透视</a></li>
	
     <li><a>高铁场景透视</a></li>
	  <li><a>高铁场景透视</a></li>
	   <li><a>高铁场景透视</a></li>
	    <li><a>高铁场景透视</a></li>
		 <li><a>高铁场景透视</a></li>
   </ul>
 
 
 </div>
 
   <div class="dialog" id="tool">
      <div class="dialog-head blue-light text-white">
	        <span>设置</span>
			 <span class="icon icon-close close"></span>
	  </div>
      <div class="dialog-body white">
	     <div class="inline pd10">
	       <label class="w100">高铁场景透视:</label> <input class="input w200">
		 </div>
         
		    <div class="inline pd10">
	       <label class="w100">高铁场景透视:</label> <input class="input w200">
		 </div>
		    <div class="inline pd10">
	       <label class="w100">高铁场景透视:</label> 		
		   <select class="w200">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
		</select>
		 </div>
	
	  </div>
	  <div class="dialog-footer white inline">
	  	  <button class="btn  btn-blue-light">确定</button>
		  <button class="btn  btn-gry close">取消</button>
	   </div>
   </div>
 
    <!-- header-->
   <nav  class="blue nav text-gry" role="">
    
       <div class="nav-head ">
         <img src="img/menu.png" class="nav-slide" >
		 <img src="dologo.png">
       </div>
       <div class="nav-body pull-right">
          <ul class="list-inline" >
             <li href="www.baidu.com" class="tsindex">高铁场景透视 </li>
			 <li class="wlistindex" > 告警工单   
		<ul class="nav-menu gry-light text w150" style="display:block">
            <li><a><span class="glyphicon glyphicon-bullhorn text-blue-light"> </span>场景透视</a></li>
	        <li><a>场景透视</a></li>
	        <li><a>场景透视</a></li>
	        <li><a>场景透视</a></li>
		    <li><a>场景透视</a></li>
          </ul>	
		</li>
			 <li class="dofunc">功能菜单</li>	
             <li class="dotimer">当前日期：<input type="text" id="calendar" style="border:0px; color:rgb(54, 142, 224);font-weight:100;width:80px ;background:#fff; padding-left:5px;margin-top:-5px;border-radius:4px"  value=""   onblur="prinv(this)" /></li>									   
         </ul>
	   </div>

    </nav>
	
 
	
	<!-- div test-->
   <div class="container">
   <div class="row">
     <div class="col-12">
	  <div class="panel panel-blue">
	   <div class="panel-body inline">
	      <label>anniu</label><button class="btn btn-lg btn-blue" onclick="showtool()">大按钮</button>
	      <button class="btn btn-default">普通的按钮</button>
		  <button class="btn btn-green">普通的按钮</button>
		  <button class="btn btn-sm btn-red">小的按钮</button>
		  <button class="btn btn-xs btn-orange">特别小的按钮</button>
		  <button class="btn btn-xs btn-gry">特别小的按钮</button>
		 <label>高铁场景透视:</label> <input class="input">
		 <select>
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
		</select>
		
		<input type="checkbox" id="checkbox_a1" class="checkbox" /> 
        <label for="checkbox_a1"></label> 

		 
		
	   </div>
	 </div>
	</div>
   </div>
    <div class="row">
	   <div class="col-12">
	      <div class="wall">
		   <div class="wall-head blue ">
		     <ul class="list-inline" >
               <li class="tsindex">高铁场景透视 </li>
               <li class="wlistindex">告警工单</li>
			   <li class="dofunc">功能菜单</li>	
			 </ul>
		    </div>
				<div class="wall-body">
		 	         <div class="wall-body-page white">
	 		           <div class="card">
	                 	  <div class="card-head blue">
		                   <div class="card-center">
		              	   <span class="text-white bold">LESS</span>
		                   <p>介绍</p>
		                    <a>单击进入</a>
		                   </div>
		                     </div>
		                   <div class="card-body white">
		                  <div class="card-center">
			                   <span class="text-gry bold">LESS</span>
		                        <p>介绍</p>
			                  <a>单击进入</a>
		                   </div>
		                   </div>
		                 <div class="card-footer blue">
		                  <div class="card-center">
			               <span class="text-gry bold">LESS</span>
		                   <p>介绍</p>
			               <a>单击进入</a>
		                  </div>
		                 </div>
		             </div>
			      </div>
				         <div class="wall-body-page white">
	 		           <div class="card">
	                 	  <div class="card-head blue">
		                   <div class="card-center">
		              	   <span class="text-white bold">LESS</span>
		                   <p>介绍</p>
		                    <a>单击进入</a>
		                   </div>
		                     </div>
		                   <div class="card-body white">
		                  <div class="card-center">
			                          <ul class="list-inline" >
             <li href="www.baidu.com" class="tsindex">高铁场景透视 </li>
			 <li class="wlistindex">告警工单</li>
			 <li class="dofunc">功能菜单</li>	
             <li class="dotimer">当前日期：<input type="text" id="calendar" style="border:0px; color:rgb(54, 142, 224);font-weight:100;width:80px ;background:#fff; padding-left:5px;margin-top:-5px;border-radius:4px"  value=""   onblur="prinv(this)" /></li>									   
         </ul>
		                   </div>
		                   </div>
		                 <div class="card-footer blue">
		                  <div class="card-center">
			               <span class="text-gry bold">LESS</span>
		                   <p>介绍</p>
			               <a>单击进入</a>
		                  </div>
		                 </div>
		             </div>
			      </div>
			            <!-- wall body over-->
			
		 	         <div class="wall-body-page white">
	 		           <div class="card">
	                 	  <div class="card-head blue">
		                   <div class="card-center">
		              	   <span class="text-white bold">LESS</span>
		                   <p>介绍</p>
		                    <a>单击进入</a>
		                   </div>
		                     </div>
		                   <div class="card-body white">
		                  <div class="card-center">
			                   <span class="text-gry bold">LESS</span>
		                        <p>介绍</p>
			                  <a>单击进入</a>
		                   </div>
		                   </div>
		                 <div class="card-footer blue">
		                  <div class="card-center">
			               <span class="text-gry bold">LESS</span>
		                   <p>介绍</p>
			               <a>单击进入</a>
		                  </div>
		                 </div>
		            </div>
			     </div>
			</div> <!-- wall body over-->
			
		   </div>
	   </div>
	</div>
	 <div class="row">
	   <div class="col-12">
	      <div class="wall">
		   <div class="wall-head blue ">
		     <ul class="list-inline" >
               <li class="tsindex">高铁场景透视 </li>
               <li class="wlistindex">告警工单</li>
			   <li class="dofunc">功能菜单</li>	
			 </ul>
		    </div>
				<div class="wall-body">
		 	         <div class="wall-body-page blue-light">
	 		           <div class="card">
	                 	  <div class="card-head blue">
		                   <div class="card-center">
		              	   <span class="text-white bold">LESS</span>
		                   <p>介绍</p>
		                    <a>单击进入</a>
		                   </div>
		                     </div>
		                   <div class="card-body white">
		                  <div class="card-center">
			                   <span class="text-gry bold">LESS</span>
		                        <p>介绍</p>
			                  <a>单击进入</a>
		                   </div>
		                   </div>
		                 <div class="card-footer blue">
		                  <div class="card-center">
			               <span class="text-gry bold">LESS</span>
		                   <p>介绍</p>
			               <a>单击进入</a>
		                  </div>
		                 </div>
		             </div>
			      </div>
				         <div class="wall-body-page white">
	 		           <div class="card">
	                 	  <div class="card-head blue">
		                   <div class="card-center">
		              	   <span class="text-white bold">LESS</span>
		                   <p>介绍</p>
		                    <a>单击进入</a>
		                   </div>
		                     </div>
		                   <div class="card-body white">
		                  <div class="card-center">
			                   <span class="text-gry bold">LESS</span>
		                        <p>介绍</p>
			                  <a>单击进入</a>
		                   </div>
		                   </div>
		                 <div class="card-footer blue">
		                  <div class="card-center">
			               <span class="text-gry bold">LESS</span>
		                   <p>介绍</p>
			               <a>单击进入</a>
		                  </div>
		                 </div>
		             </div>
			      </div>
			            <!-- wall body over-->
			
		 	         <div class="wall-body-page white">
	 		           <div class="card">
	                 	  <div class="card-head blue">
		                   <div class="card-center">
		              	   <span class="text-white bold">LESS</span>
		                   <p>介绍</p>
		                    <a>单击进入</a>
		                   </div>
		                     </div>
		                   <div class="card-body white">
		                  <div class="card-center">
			                   <span class="text-gry bold">LESS</span>
		                        <p>介绍</p>
			                  <a>单击进入</a>
		                   </div>
		                   </div>
		                 <div class="card-footer blue">
		                  <div class="card-center">
			               <span class="text-gry bold">LESS</span>
		                   <p>介绍</p>
			               <a>sssss</a>
		                  </div>
		                 </div>
		            </div>
			     </div>
			</div> <!-- wall body over-->
			
		   </div>
	   </div>
	</div>
   
    <div class="row">

	      <div class="screen blue text-white">
	         <h1>当前日期：</h1>
			 <span>当前日期：</span>
			 <p>当前日期：</p>
			 <a>当前日期：</a>
	     </div>
	   
    </div>
   
   
     <div class="row">
	 
	    <div class="card">
		  <div class="card-head blue">
		    <div class="card-center">
			   <span class="text-white bold">LESS</span>
		       <p>介绍</p>
		       <a>单击进入</a>
		    </div>
		  </div>
		  <div class="card-body white">
		    <div class="card-center">
			     <span class="text-gry bold">LESS</span>
		         <p>介绍</p>
			     <a>单击进入</a>
		    </div>
		  </div>
		  <div class="card-footer blue">
		    <div class="card-center">
			     <span class="text-gry bold">LESS</span>
		         <p>介绍</p>
			     <a>单击进入</a>
		    </div>
		  </div>
		</div>
		  <div class="card">
		  <div class="card-head green">
		    <div class="card-center">
			   <span class="text-white bold">LESS</span>
		       <p>介绍</p>
		       <a>单击进入</a>
		    </div>
		  </div>
		  <div class="card-body white">
		    <div class="card-center">
			     <span class="text-gry bold">LESS</span>
		         <p>介绍</p>
			     <a>单击进入</a>
		    </div>
		  </div>
		    <div class="card-footer blue">
		    <div class="card-center">
			     <span class="text-gry bold">LESS</span>
		         <p>介绍</p>
			     <a>单击进入</a>
		    </div>
		  </div>
		</div>
	 
	   <div class="card">
		  <div class="card-head red">
		    <div class="card-center">
			   <span class="text-white bold">LESS</span>
		       <p>介绍</p>
		       <a>单击进入</a>
		    </div>
		  </div>
		  <div class="card-body white">
		    <div class="card-center">
			     <span class="text-gry bold">LESS</span>
		         <p>介绍</p>
			     <a>单击进入</a>
		    </div>
		  </div>
		    <div class="card-footer blue">
		    <div class="card-center">
			     <span class="text-gry bold">LESS</span>
		         <p>介绍</p>
			     <a>单击进入</a>
		    </div>
		  </div>
		</div>
	 
	   <div class="card">
		  <div class="card-head orange">
		    <div class="card-center">
			   <span class="text-white bold">LESS</span>
		       <p>介绍</p>
		       <a>单击进入</a>
		    </div>
		  </div>
		  <div class="card-body white">
		    <div class="card-center">
			     <span class="text-gry bold">LESS</span>
		         <p>介绍</p>
			     <a>单击进入</a>
		    </div>
		  </div>
		</div>
	 
	   <div class="card">
	       <div class="card-body white">
		    <div class="card-center">
			     	 <img src="logo.jpg">
			     <span class="text-gry bold">LESS</span>
		         <p>介绍</p>
			     <a class="text-red">单击进入</a>
			
		    </div>
		  </div>
		  <div class="card-head blue">
		    <div class="card-center">
			   <span class="text-white bold">LESS</span>
		       <p>介绍</p>
		       <a>单击进入</a>
		    </div>
		  </div>
		 
		</div>
	 
     </div>
	 
	 
   

   <div class="row">
     <div class="tile blue ">
       <div class="tile-center">
         <span class="text-white">LESS</span>
		 <p>介绍</p>
	     <a>单击进入</a>
	   </div>
   </div>
    <div class="tile green ">
       <div class="tile-center">
         <span class="text-white">LESS</span>
	  </div>
   </div>
    <div class="tile red">
       <div class="tile-center">
         <span class="text-white">LESS</span>
	  </div>
   </div>
     <div class="tile orange ">
	  <div class="tile-center">
           <img src="logo.jpg">
		   <p>介绍</p>
		   <a>单击进入</a>
	  </div>
   
   </div>
     </div>
	 
	 
	 
    <div class="row">
	  <div class="col-12">
	    <div class="panel panel-blue">
		   <div class="panel-head">
		   文本
		   </div>
		   <div class="panel-body">
		     <p href="www.baidu.com" class="text-red">文本</p>
			 <p class="text-green">文本</p>
		     <p class="text-blue">文本</p>
			 <p class="text-orange">文本</p>
			 <em>文本</em>
		   
		   </div>
		</div>
	  </div>
	</div>

   
   	<div class="row">
	<div class="col-12">
	  <div class="panel panel-green">
	    <div class="panel-head inline">
		  <label>姓名</label> <input class="input-sm"></input><span class="caret"></span>	 
		  <select class="select-sm">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
		</select>
		</div>
		 <div class="panel-body">
		   <table class="table table-hover table-striped table-bordered">
              <tr>
                <th>Firstname</th>
                <th>Lastname</th>
				<th>Lastname</th>
				<th>Lastname</th>
				<th>Lastname</th>
				<th>Lastname</th>
				<th>Lastname</th>
				<th>Lastname</th>
				<th>Lastname</th>
				<th>Lastname</th>
				<th>Lastname</th>
				<th>Lastname</th>
				<th>Lastname</th>
				<th>Lastname</th>
				<th>Lastname</th>
              </tr>
              <tr>
               <td>Bill</td>
               <td>Gates</td>
			   <td>Gates</td>
			   <td>Bill</td>
               <td>Gates</td>
			   <td>Gates</td>
			   <td>Bill</td>
               <td>Gates</td>
			   <td>Gates</td>
			   <td>Gates</td>
			   <td>Bill</td>
               <td>Gates</td>
			   <td>Gates</td>
			   <td>Bill</td>
               <td>Gates</td>
			
              </tr>
			  <tr>
               <td>Bill</td>
               <td>Gates</td>
			   <td>Gates</td>
			   <td>Bill</td>
               <td>Gates</td>
			   <td>Gates</td>
			   <td>Bill</td>
               <td>Gates</td>
			   <td>Gates</td>
			   <td>Gates</td>
			   <td>Bill</td>
               <td>Gates</td>
			   <td>Gates</td>
			   <td>Bill</td>
               <td>Gates</td>
			
              </tr>
			  <tr>
               <td>Bill</td>
               <td>Gates</td>
			   <td>Gates</td>
			   <td>Bill</td>
               <td>Gates</td>
			   <td>Gates</td>
			   <td>Bill</td>
               <td>Gates</td>
			   <td>Gates</td>
			   <td>Gates</td>
			   <td>Bill</td>
               <td>Gates</td>
			   <td>Gates</td>
			   <td>Bill</td>
               <td>Gates</td>
			
              </tr>
			  <tr>
                 <td>Bill</td>
               <td>Gates</td>
			   <td>Gates</td>
			   <td>Bill</td>
               <td>Gates</td>
			   <td>Gates</td>
			   <td>Bill</td>
               <td>Gates</td>
			   <td>Gates</td>
			   <td>Gates</td>
			   <td>Bill</td>
               <td>Gates</td>
			   <td>Gates</td>
			   <td>Bill</td>
               <td>Gates</td>
			
              </tr>

            </table>
		</div>
		<!--div class="panel-footer">
		  sssssssss
		</div-->
	  </div>
	</div>

	</div>
    
	<div class="row">
	<div class="col-12">
	  <div class="panel panel-blue">
	    <div class="panel-head">
		  sssssssss
		</div>
		<div class="panel-body arguschart" id="col1" ></div>
	  </div>
	</div>
	</div>
	
    <div class="row">
	<div class="col-6">
	  <div class="panel panel-red">
	    <div class="panel-head">
		  sssssssss
		</div>
		<div class="panel-body arguschart" id="col2" ></div>
		
	  </div>
	</div>
		<div class="col-6">
	  <div class="panel panel-orange">
	    <div class="panel-head">
		  sssssssss
		</div>
		<div class="panel-body arguschart" id="col3" ></div>
	  </div>
	</div>
	</div>
	   <div class="row">
	<div class="col-6">
	  <div class="panel panel-green">
	    <div class="panel-head">
		  sssssssss
		</div>
		<div class="panel-body arguschart" id="col4" ></div>
	  </div>
	</div>
		<div class="col-6">
	  <div class="panel panel-blue">
	    <div class="panel-head">
		  sssssssss
		</div>
		<div class="panel-body arguschart"   id="pie1" ></div>
	  </div>
	</div>
	</div>
	

	
	   <div class="row">
	<div class="col-12">
	  <div class="panel panel-red">
	    <div class="panel-head">
		  sssssssss
		</div>
		 <div class="panel-body">
		   <table class="table">
              <tr>
                <th>Firstname</th>
                <th>Lastname</th>
				<th>Lastname</th>
              </tr>
              <tr>
               <td>Bill</td>
               <td>Gates</td>
			   <td>Gates</td>
              </tr>
			  <tr>
               <td>Bill</td>
               <td>Gates</td>
			   <td>Gates</td>
              </tr>
			  <tr>
               <td>Bill</td>
			   <td>Gates</td>
			   <td>Gates</td>
              </tr>
			  <tr>
               <td>Bill</td>
			   <td>Gates</td>
               <td>Gates</td>
              </tr>

            </table>
		</div>
		<div class="panel-footer">
		  sssssssss
		</div>
	  </div>
	</div>

	</div>
	
	
	</div>
	
	
	
	<!--ssss-->
	



	<script>
	
	var curtime;	
		$(document).ready(function() {  
		   var myDate = new Date();
		  curtime = myDate.getFullYear()+'-'+( myDate.getMonth()+1)+'-'+ myDate.getDate();
           $('#calendar').val(myDate.getFullYear()+'-'+( myDate.getMonth()+1)+'-'+ myDate.getDate())
		   })
		   
    function showtool(){
	   $('#tool').show();
	 }
	 $('#logo').click(function(){
	   $('.slide').toggle();
	 })

     $(function () {
    $('#pie1').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: 'Browser market shares at a specific website, 2010'
        },
        tooltip: {
    	    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Firefox',   45.0],
                ['IE',       26.8],
                {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                ['Safari',    8.5],
                ['Opera',     6.2],
                ['Others',   0.7]
            ]
        }]
    });
});
   $(function () {
    $('#col1').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Monthly Average Rainfall'
        },
        subtitle: {
            text: 'Source: WorldClimate.com'
        },
        xAxis: {
            categories: [
                'Jan',
                'Feb',
                'Mar',
                'Apr',
                'May',
                'Jun',
                'Jul',
                'Aug',
                'Sep',
                'Oct',
                'Nov',
                'Dec'
            ]
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Rainfall (mm)'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: 'Tokyo',
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

        }, {
            name: 'New York',
            data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]

        }, {
            name: 'London',
            data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]

        }, {
            name: 'Berlin',
            data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]

        }]
    });
});

   
     $(function () {
    $('#col2').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Monthly Average Rainfall'
        },
        subtitle: {
            text: 'Source: WorldClimate.com'
        },
        xAxis: {
            categories: [
                'Jan',
                'Feb',
                'Mar',
                'Apr',
                'May',
                'Jun',
                'Jul',
                'Aug',
                'Sep',
                'Oct',
                'Nov',
                'Dec'
            ]
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Rainfall (mm)'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: 'Tokyo',
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

        }, {
            name: 'New York',
            data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]

        }, {
            name: 'London',
            data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]

        }, {
            name: 'Berlin',
            data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]

        }]
    });
});

   
     $(function () {
    $('#col3').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Monthly Average Rainfall'
        },
        subtitle: {
            text: 'Source: WorldClimate.com'
        },
        xAxis: {
            categories: [
                'Jan',
                'Feb',
                'Mar',
                'Apr',
                'May',
                'Jun',
                'Jul',
                'Aug',
                'Sep',
                'Oct',
                'Nov',
                'Dec'
            ]
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Rainfall (mm)'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: 'Tokyo',
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

        }, {
            name: 'New York',
            data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]

        }, {
            name: 'London',
            data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]

        }, {
            name: 'Berlin',
            data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]

        }]
    });
});

     $(function () {
    $('#col4').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Monthly Average Rainfall'
        },
        subtitle: {
            text: 'Source: WorldClimate.com'
        },
        xAxis: {
            categories: [
                'Jan',
                'Feb',
                'Mar',
                'Apr',
                'May',
                'Jun',
                'Jul',
                'Aug',
                'Sep',
                'Oct',
                'Nov',
                'Dec'
            ]
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Rainfall (mm)'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: 'Tokyo',
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

        }, {
            name: 'New York',
            data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]

        }, {
            name: 'London',
            data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]

        }, {
            name: 'Berlin',
            data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]

        }]
    });
});


  try{
  var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
     console.log('createok')}
  catch(e){
  console.log(e)
  }
  
   </script>
   
	
	
			
 </body>
</html>
